<template>
  <div class="app-container" v-loading="loading">
    <el-row :gutter="10">
      <el-col :span="detailInfo.returnStatus==1?24:19">
        <ContractInfo :contract-info="detailInfo.contractInformation" :customer-id="detailInfo.customerId"></ContractInfo>
        <OutCarInfo :outbound-vehicle-condition="detailInfo.outboundVehicleCondition"></OutCarInfo>
        <ReturnCarSettlementInfo v-if="detailInfo.returnStatus!=1" :detail-info="detailInfo"></ReturnCarSettlementInfo>
      </el-col>
      <el-col v-if="detailInfo.returnStatus>1" :span="5">
        <flow-record v-if="detailInfo.flowId" :id="detailInfo.flowId" :custom-style="customerStyle"></flow-record>
      </el-col>
    </el-row>

    <div class="card-wrap flex justify-end card-padding">
      <el-button @click="back">返回</el-button>
    </div>
  </div>
</template>

<script>

import OutCarInfo from "@/views/returnCar/components/OutCarInfo.vue";
import ContractInfo from "@/views/returnCar/components/ContractInfo.vue";
import ReturnCarSettlementInfo from "@/views/returnCar/components/ReturnCarSettlementInfo.vue";
import FlowRecord from "@/components/FlowRecord/index.vue";
import * as orderReturnApi from "@/api/returnCar/returnCar";

export default {
  components: {ReturnCarSettlementInfo, ContractInfo, OutCarInfo, FlowRecord},
  props: {},
  data() {
    return {
      loading: false,
      customerStyle: 'margin:0',
      detailInfo: {},
    }
  },
  computed: {},
  methods: {
    getDetail() {
      this.loading = true
      let param = {
        orderNumber:this.$route.query.orderNo,
        carId:this.$route.query.carId,
      }
      orderReturnApi.orderReturnDetail(param).then(res => {
        this.detailInfo = res.data;
      }).finally((f) => {
        this.loading = false
      })
    },
    back() {
      this.$router.back()
      this.$store.dispatch('tagsView/delView', this.$route)
    }
  },
  created() {
    this.getDetail()
  },

}
</script>

<style lang="scss" scoped>
</style>
